import React, {PureComponent} from 'react';
import {StyleSheet, Text, View, TouchableWithoutFeedback, Image, Platform, ScrollView} from 'react-native';
import utils from '../../../common/utils';

export default class extends PureComponent {
    search = (title) => {
        const {getData, resetPage, setKeywords, toggleSearchHistory} = this.props;
        toggleSearchHistory(false);
        setKeywords(title, resetPage(getData));
    };

    render() {
        const {searchHistory, removeKeywords} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.titleWrap}>
                    <Text style={styles.title}>搜索历史</Text>
                </View>
                <ScrollView style={styles.list}>
                    {
                        searchHistory.map((title, idx) =>
                            <View key={idx} style={styles.item}>
                                <TouchableWithoutFeedback onPress={() => {
                                    this.search(title);
                                }}>
                                    <View style={styles.textWrap}>
                                        <Text style={styles.itemText} numberOfLines={1}>{title}</Text>
                                    </View>
                                </TouchableWithoutFeedback>
                                <TouchableWithoutFeedback onPress={() => {
                                    removeKeywords(title);
                                }}>
                                    <Image source={require('../../../images/icon_close_1.png')}
                                           style={styles.closeImg}/>
                                </TouchableWithoutFeedback>
                            </View>
                        )
                    }
                </ScrollView>
            </View>
        );
    }
}

const height = parseInt(utils.getScreen().height);

const styles = StyleSheet.create({
    container: {
        ...Platform.select({
            ios: {
                height: height - 64 - 1
            },
            android: {
                height: height - 44 - 1
            }
        }),
        backgroundColor: '#ffffff',
        marginTop: 1,
        zIndex: 2
    },
    titleWrap: {
        paddingTop: 20,
        paddingLeft: 16
    },
    title: {
        fontWeight: 'bold',
        fontSize: 16,
        color: '#3e3e3e',
        marginBottom: 12
    },
    list: {
        flex: 1,
        paddingLeft: 16
    },
    item: {
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderColor: '#f6f6f6',
        paddingRight: 12,
        alignItems: 'center'
    },
    textWrap: {
        flex: 1,
        height: 36,
        justifyContent: 'center'
    },
    itemText: {
        fontSize: 12,
        color: '#9c9c9c'
    },
    closeImg: {
        width: 20,
        height: 20,
        marginLeft: 8
    }
});
